/**
 * Created by lxh on 2018/1/3.
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Form, Card, Row, Col, Input, Select, Table, Button,Radio,Modal,message} from 'antd';
import styles from './Shop/ShopManage.less';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {routerRedux} from 'dva/router';
import PowerList from '../../components/AdminPowerEdit/powerList/PowerList';
import SellerList from '../../components/AdminPowerEdit/sellerList/SellerList';
import {powerControl} from '../../utils/powerControl';
const AuthButton = powerControl(Button);
const FormItem = Form.Item;
const {Option} = Select;
@connect(state=>({
    addSeller: state.addSeller,
}))
@Form.create()
export default class AddSeller extends Component {
    state={
        selectedRowKeys:[],
        userId:'',
    }
    componentDidMount(){
        if(!this.props.location.state){
            this.props.dispatch(routerRedux.push("/management/AdminPowerSetting"))
            return;
        }
        this.props.dispatch({
            type: 'addSeller/querySeller',
            payload:{
                userId:this.props.location.state,
            },
        })
        this.setState({
            userId:this.props.location.state,
            selectedRowKeys:this.props.addSeller.sellerIdList,
        })
    };
    componentWillReceiveProps(nextProps) {
        // clean state
        if (nextProps.addSeller.sellerIdList.length===0) {
            this.setState({
                selectedRowKeys: [],
            });
        }else{
            console.log(nextProps.addSeller.sellerIdList)
            this.setState({
                selectedRowKeys:nextProps.addSeller.sellerIdList
            })
        }
    };
    handleRowSelectChange = (selectedRowKeys) => {
        console.log(selectedRowKeys)
        this.setState({ selectedRowKeys });
    }

    handleTableChange = (pagination) => {
        const {dispatch} = this.props;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            userId:this.state.userId,
        };
        dispatch({
            type: 'addSeller/querySeller',
            payload:params,
        });
    }
    handleSubmit=()=>{
        this.props.dispatch({
            type: 'addSeller/submitSeller',
            payload:{shopIdList:this.state.selectedRowKeys,
            userId:this.state.userId},
            callback:(response)=>{
                if(response.result===0){
                    message.success("提交成功")
                    this.props.dispatch({
                        type: 'addSeller/querySeller',
                        userId:this.state.userId,
                    })
                }else{
                    message.error("提交失败")
                }
            }
        })
    };
    handleFormReset = () => {
        const {form} = this.props;
        form.resetFields();
    };
        handleSearch = (e) => {
            e.preventDefault();
            const {dispatch, form} = this.props;
            form.validateFields((err, fieldValue) => {
                if (err) return;
                const values = {
                    ...fieldValue,
                    userId:this.state.userId,
                };
                dispatch({
                    type: 'addSeller/querySeller',
                    payload: values,
                });
            });
        };
    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;
        const {adminManage} = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem label="商店id">
                            {getFieldDecorator('shopId')(<Input size="default" placeholder="商店id"/>)
                            }
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="店铺名称">
                            {getFieldDecorator('shopName')(<Input size="default" placeholder="店铺名称"/>)}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
            <span className={styles.sumbitButtons}>
              <AuthButton auth="querySeller" type="primary" htmlType="submit" >查询</AuthButton>
              <AuthButton auth="resetSeller" style={{marginLeft: 8}} type="danger" onClick={this.handleFormReset}>重置</AuthButton>
              <AuthButton auth="commitSeller" style={{marginLeft: 8}} type="default" onClick={this.handleSubmit}>提交</AuthButton>
              <Button auth="" style={{marginLeft: 8}} type="dashed"><Link to={{pathname:'/management/managementSeller',state:this.state.userId}}>返回</Link></Button>
            </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    renderForm() {
        return this.renderSimpleForm();
    }
    render() {
        const {selectedRowKeys}=this.state;
        const{data:{list,pagination}}=this.props.addSeller
        const columns = [{
            title: '商家ID',
            dataIndex: 'id',
            key: 'id',
        },{
            title: '店铺名称',
            dataIndex: 'shop_name',
            key: 'shop_name',
        }, {
            title: '店铺标题',
            dataIndex: 'shop_title',
            key: 'shop_title',
        }, {
            title: '详细地址',
            dataIndex: 'shop_address',
            key: 'shop_address',
        },
        ];
        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
        };
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };
        return (
            <PageHeaderLayout title="所有商家">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            <div>
                                {this.renderForm()}
                            </div>
                            <div>
                            </div>
                            <div>
                                <Table
                                columns={columns}
                                dataSource={list}
                                rowKey={record=>record.id}
                                rowSelection={rowSelection}
                                pagination={paginationProps}
                                onChange={()=>this.handleTableChange(pagination)}/>
                            </div>
                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }
}